Ext.define('Bible.view.BiblePanel', {
    extend: 'Ext.tab.Panel',
    xtype: 'biblepanel',
    requires: [
        'Bible.view.VersesList',
        'Bible.view.SearchPanel'
    ],

    config: {
        title: 'Biblia',
        fullscreen: true,
//        iconCls: 'bookmarks',
        tabBarPosition: 'bottom',
        tabBar: {
            layout: {
                pack: 'center'
            }
            ,
            scrollable: {
                direction: 'horizontal'
            }
        },
        activeTab: 1,

        items: [
//            {
//                title: 'Genesa 1',
//                xtype: 'verseslist',
//                iconCls: 'bookmarks',
//                value: {
//                    book: 1,
//                    chapter: 1
//                }
//            },
            {
                title: 'Psalmul 1',
                xtype: 'verseslist',
                iconCls: 'bookmarks',
                value: {
                    book: 19,
                    chapter: 1
                }
            },
            {
                title: 'Proverbe 1',
                xtype: 'verseslist',
                iconCls: 'bookmarks',
                value: {
                    book: 20,
                    chapter: 1
                }
            },
            {
                title: 'Fapte 1',
                xtype: 'verseslist',
                iconCls: 'bookmarks',
                value: {
                    book: 44,
                    chapter: 1
                }
            },
            {
                xtype: 'biblesearchpanel',
                title: 'Căutare',
                iconCls: 'search'
            },
            {
                title: 'Setări',
                iconCls: 'settings',
                html: 'În curînd va fi disponibil'
            }
//            {
//                title: 'Altele',
//                iconCls: 'more',
//                xtype: 'tabpanel',
//                tabBarPosition: 'bottom',
//                tabBar: {
//                    layout: {
//                        pack: 'center'
//                    }
//                },
//                items: [
//                    {
//                        xtype: 'biblesearchpanel',
//                        title: 'Căutare',
//                        iconCls: 'search'
//                    },
////                    {
////                        xtype: 'biblesearchpanel',
////                        grouped: false
////                    },
//                    {
//                        title: 'Setări',
//                        iconCls: 'settings',
//                        html: 'TODO settings'
//                    }
//                ]
//            }
        ]
    },

    initialize: function() {
        var me = this;
        me.callParent();

        me.getTabBar().on({
            order: 'before',
            tap: 'onTabTap',
            delegate: '> tab',
            scope   : me
        });

        me.on({
            delegate: '> verseslist',
            scope   : me,
            pagechange: function(list, value, title){
                //<debug>
                console.debug('pagechange', value, title);
                //</debug>
            }
        });
    },

    onTabTap: function(tab) {
        var me = this;
        //<debug>
        console.debug('onTabTap');
        //</debug>
        if(tab == me.getTabBar().getActiveTab() && me.getActiveItem().isXType('verseslist')){
            //<debug>
            console.debug('same tab');
            //</debug>
            // TODO not find solution yet
            if(!me.picker){
                me.picker = Ext.Viewport.add({
                    xtype: 'biblechapterpicker',
                    value: {
                        book: 1,
                        chapter: 1
                    }
                });
                me.picker.on({
                    scope: me,
                    change: function(picker, value){
//                    hide: function(picker){
                        var value = picker.getValue(),
                            list = me.getActiveItem(),
                            record = booksRecords[value.book - 1],
                            title = record[1] + ' ' + value.chapter;
                        //<debug>
                        console.debug('picker value', value);
                        //</debug>
                        //me.getTabBar().getActiveTab().setTitle(title);
                        list.setPage(picker.getValue());
                    }
                });
            }

            var list = me.getActiveItem();
            //<debug>
            console.debug('list.getPage: ', list.getValue());
            //</debug>
            me.picker.setValue(list.getValue());
            me.picker.show();
        }
    }
});